
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body, ul, li {margin: 0; padding: 0; font-size: 14px;}
body {padding: 30px; background-color: #ccc;}
ul {margin: 5px 0 10px 0;}
ul li {list-style: none; display: block;}
li.classname { font-weight: bold; }
.csscode, pre {padding: 10px; border: 1px solid #999; display: block; background-color: #fff; width: 100%; font-size: 12px; line-height: 200%;}
li.classmark { font-size: 12px; margin: 5px; line-height: 160%; display: none;}

/*
一下代码由程序自动生成。
*/
.pic {background-image: url("CSS Satyr.png"); display: block;}
.pic_6 {background-position: -78px -714px; width: 72px; height: 72px; }
.pic_16 {background-position: -78px -642px; width: 72px; height: 72px; }
.pic_15 {background-position: -0px -642px; width: 72px; height: 72px; }
.pic_19 {background-position: -0px -570px; width: 72px; height: 72px; }
.pic_9 {background-position: -0px -498px; width: 72px; height: 72px; }
.pic_10 {background-position: -78px -498px; width: 72px; height: 72px; }
.pic_20 {background-position: -78px -570px; width: 72px; height: 72px; }
.pic_4 {background-position: -78px -432px; width: 72px; height: 72px; }
.pic_14 {background-position: -78px -360px; width: 72px; height: 72px; }
.pic_22 {background-position: -78px -288px; width: 72px; height: 72px; }
.pic_18 {background-position: -78px -216px; width: 72px; height: 72px; }
.pic_12 {background-position: -78px -144px; width: 72px; height: 72px; }
.pic_8 {background-position: -78px -72px; width: 72px; height: 72px; }
.pic_2 {background-position: -78px -0px; width: 72px; height: 72px; }
.pic_5 {background-position: -0px -708px; width: 72px; height: 72px; }
.pic_3 {background-position: -0px -430px; width: 72px; height: 72px; }
.pic_13 {background-position: -0px -360px; width: 72px; height: 72px; }
.pic_7 {background-position: -0px -70px; width: 72px; height: 72px; }
.pic_17 {background-position: -0px -215px; width: 72px; height: 72px; }
.pic_1 {background-position: -0px -0px; width: 72px; height: 72px; }
.pic_11 {background-position: -0px -144px; width: 72px; height: 72px; }
.pic_21 {background-position: -0px -288px; width: 72px; height: 72px; }
//-->
</style>
<title>CSS Satyr - http://shen.li/</title>
</head>
<body>
<h2>CSS Satyr</h2>
<ul>
<li>版本：1.2.0.0</li>
<li>作者：shen.li</li>
<li>主页：<a href="http://shen.li/blog/post/C_sharp/CSS_Satyr.html" target="_blank">http://shen.li/blog/post/C_sharp/CSS_Satyr.html</a></li>
<li>图片：<a href="CSS Satyr.png">D:\GZ2003\页面练习\婚礼纪\images\CSS Satyr.png</a></li>
</ul>

<h2>CSS 代码</h2>
<pre>
.shen_li {background-image: url("CSS Satyr.png"); display: block;}
.pic_6 {background-position: -78px -714px; width: 72px; height: 72px; }
.pic_16 {background-position: -78px -642px; width: 72px; height: 72px; }
.pic_15 {background-position: -0px -642px; width: 72px; height: 72px; }
.pic_19 {background-position: -0px -570px; width: 72px; height: 72px; }
.pic_9 {background-position: -0px -498px; width: 72px; height: 72px; }
.pic_10 {background-position: -78px -498px; width: 72px; height: 72px; }
.pic_20 {background-position: -78px -570px; width: 72px; height: 72px; }
.pic_4 {background-position: -78px -432px; width: 72px; height: 72px; }
.pic_14 {background-position: -78px -360px; width: 72px; height: 72px; }
.pic_22 {background-position: -78px -288px; width: 72px; height: 72px; }
.pic_18 {background-position: -78px -216px; width: 72px; height: 72px; }
.pic_12 {background-position: -78px -144px; width: 72px; height: 72px; }
.pic_8 {background-position: -78px -72px; width: 72px; height: 72px; }
.pic_2 {background-position: -78px -0px; width: 72px; height: 72px; }
.pic_5 {background-position: -0px -708px; width: 72px; height: 72px; }
.pic_3 {background-position: -0px -430px; width: 72px; height: 72px; }
.pic_13 {background-position: -0px -360px; width: 72px; height: 72px; }
.pic_7 {background-position: -0px -70px; width: 72px; height: 72px; }
.pic_17 {background-position: -0px -215px; width: 72px; height: 72px; }
.pic_1 {background-position: -0px -0px; width: 72px; height: 72px; }
.pic_11 {background-position: -0px -144px; width: 72px; height: 72px; }
.pic_21 {background-position: -0px -288px; width: 72px; height: 72px; }
</pre>

<h2>调用效果</h2>

<ul><li class="classname">c-3h.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_6"&gt; ... &lt;/span&gt;</div></li><li class="classmark">c-3h.png</li><li class="pic pic_6"></li></ul>
<ul><li class="classname">icon6-2.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_16"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon6-2.png</li><li class="pic pic_16"></li></ul>
<ul><li class="classname">icon6.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_15"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon6.png</li><li class="pic pic_15"></li></ul>
<ul><li class="classname">icon8.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_19"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon8.png</li><li class="pic pic_19"></li></ul>
<ul><li class="classname">icon2.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_9"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon2.png</li><li class="pic pic_9"></li></ul>
<ul><li class="classname">icon2-2.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_10"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon2-2.png</li><li class="pic pic_10"></li></ul>
<ul><li class="classname">icon8-2.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_20"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon8-2.png</li><li class="pic pic_20"></li></ul>
<ul><li class="classname">c-2h.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_4"&gt; ... &lt;/span&gt;</div></li><li class="classmark">c-2h.png</li><li class="pic pic_4"></li></ul>
<ul><li class="classname">icon5-2.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_14"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon5-2.png</li><li class="pic pic_14"></li></ul>
<ul><li class="classname">icon9-2.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_22"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon9-2.png</li><li class="pic pic_22"></li></ul>
<ul><li class="classname">icon7-2.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_18"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon7-2.png</li><li class="pic pic_18"></li></ul>
<ul><li class="classname">icon3-2.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_12"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon3-2.png</li><li class="pic pic_12"></li></ul>
<ul><li class="classname">icon1-2.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_8"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon1-2.png</li><li class="pic pic_8"></li></ul>
<ul><li class="classname">c-1h.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_2"&gt; ... &lt;/span&gt;</div></li><li class="classmark">c-1h.png</li><li class="pic pic_2"></li></ul>
<ul><li class="classname">c-3.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_5"&gt; ... &lt;/span&gt;</div></li><li class="classmark">c-3.png</li><li class="pic pic_5"></li></ul>
<ul><li class="classname">c-2.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_3"&gt; ... &lt;/span&gt;</div></li><li class="classmark">c-2.png</li><li class="pic pic_3"></li></ul>
<ul><li class="classname">icon5.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_13"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon5.png</li><li class="pic pic_13"></li></ul>
<ul><li class="classname">icon1.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_7"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon1.png</li><li class="pic pic_7"></li></ul>
<ul><li class="classname">icon7.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_17"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon7.png</li><li class="pic pic_17"></li></ul>
<ul><li class="classname">c-1.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_1"&gt; ... &lt;/span&gt;</div></li><li class="classmark">c-1.png</li><li class="pic pic_1"></li></ul>
<ul><li class="classname">icon3.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_11"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon3.png</li><li class="pic pic_11"></li></ul>
<ul><li class="classname">icon9.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_21"&gt; ... &lt;/span&gt;</div></li><li class="classmark">icon9.png</li><li class="pic pic_21"></li></ul>
</body>
</html>
				